@extends('website.layouts.master')
@section('title', $ticket->title)

@section('pagecss')
    <style type="text/css">
        .ticket_avatar {
            vertical-align: middle;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        textarea {
            resize: none;
            overflow: hidden;
        }
    </style>
@endsection


@section('content')
    @include('website.layouts.title', ['simple'=>true])
    <!-- BEGIN .main-content -->
    <section>
        <div class="site-main">
            <div class="ttm-row sidebar ttm-sidebar-right ttm-bgcolor-white clearfix">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-9 col-lg-8">
                            @if(!empty($errors->all()))
                                <div class="alert alert-danger text-white bg-danger">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <ul>
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="card">
                                <div class="card-body">
                                    <table class="table table-striped">
                                        @foreach(json_decode($ticket->description) as $key => $description)
                                            <tr>
                                                <th width="250px">{{ ucfirst($key) }}</th>
                                                <td>{{ $description }}</td>
                                            </tr>
                                        @endforeach
                                    </table>
                                    <div class="comments-footer clearfix">
                                        @if($ticket->archive && $ticket->archive->childrenFiles)
                                            @foreach($ticket->archive->childrenFiles as $file)
                                                <span>
                                                    <i class="icon-file-empty"></i> <a href="{{ route('download_file', ['archive'=>$file->id]) }}">{{ $file->name() }}</a>
                                                </span>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <br/>

                            @if($ticket->status != \App\Ticket::STATUS_CLOSED)
                                <div class="card">
                                    <div class="card-body">
                                        <form action="{{ route('add_ticket_comment', ['ticket'=> $ticket->id]) }}" method="POST" enctype="multipart/form-data">
                                            {{ csrf_field() }}
                                            <div class="form-group">
                                                <textarea name="comment" id="comment" required class="form-control" rows="1" placeholder="Write your comment..."></textarea>
                                                <input type="hidden" name="comment_line" id="comment_line">
                                            </div>
                                            <div class="row gutters">
                                                <div class="col-3">
                                                    <input type="file" class="filestyle" name="attachments[]" data-icon="true" multiple onchange="validateFileName(this)">
                                                </div>
                                                <div class="col">
                                                    <div class="form-group">
                                                        <button type="submit" id="send_comment" class="btn btn-primary float-right">
                                                            Send
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <br/>
                            @endif

                            <div class="card">
                                <div class="card-body">
                                    <div class="media overflow-scroll">
                                        <div class="media-body" id="comments">

                                            @foreach($ticket->messages as $message)

                                                <div class="media mt-3">
                                                    <div class="mr-3">
                                                        <a href="#">
                                                    <span class="media-object">
                                                    @php($file = ($message->user)?$message->user->archive->findChildByContentType("Personal Photo"):null)
                                                        @if($file)
                                                            <!-- <img class="ticket_avatar" alt="48x48" src="{{ $file }}"> -->
                                                            <img class="ticket_avatar" alt="48x48" src="/int/images/user.png">
                                                        @else
                                                            <img class="ticket_avatar" alt="48x48" src="/int/images/user.png">
                                                        @endif
                                                    </span>
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h5 class="mt-0 media-heading">
                                                            @if($message->user)
                                                                <a style="color: #4266b2">{{ $message->user->en_name }}</a>
                                                            @elseif($ticket->isExternal())
                                                                <a style="color: #4266b2" href="{{ $ticket->externalLink() }}">{{ $ticket->externalName() }}</a>
                                                            @endif
                                                            <span class="date" style="border: none;padding: 0px;">{{ $message->createdFrom() }}</span>
                                                        </h5>
                                                        <p>{!! nl2br(htmlspecialchars($message->comment)) !!}</p>
                                                        <div class="comments-footer clearfix">
                                                            @if($message->archive && $message->archive->childrenFiles)
                                                                @foreach($message->archive->childrenFiles as $file)
                                                                    <span>
                                                                        <i class="icon-file-empty"></i> <a
                                                                                href="{{ route('download_file', ['archive'=>$file->id]) }}">{{ $file->name() }}</a>
                                                                    </span>
                                                                @endforeach
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                            <div style="display: none;">
                                                <div class="media mt-3" id="comment_template">
                                                    <div class="mr-3">
                                                        <a href="#">
                                                        <span class="media-object">
                                                            <img class="ticket_avatar" alt="48x48" src="/int/images/user.png">
                                                        </span>
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h5 class="mt-0 media-heading">
                                                            <span class="user_name"></span>
                                                            <span class="date created_from" style="border: none;padding: 0px;"></span>
                                                        </h5>
                                                        <p class="comment"></p>
                                                        <div class="comments-footer clearfix">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="display: none;">
                                            <span id="comment_file_template">
                                                <i class="icon-file-empty"></i> <a></a>
                                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 widget-area sidebar-right ttm-col-bgcolor-yes ttm-bg ttm-right-span ttm-bgcolor-grey mt_60 pt-60 mb_60 pb-60 res-991-mt-0 res-991-pt-0">
                            @include('website.components.topics')
                            @include('website.components.events')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('pagejs')
    <script type="text/javascript">
        $(document).ready(function () {
            $(".ajax_form").ajaxForm([], function (response) {
                var commentElement = $("#comment_template").clone();

                commentElement.attr('id', '');
                commentElement.find('.user_name').text(response.user_name);
                commentElement.find('.created_from').text(response.created_from);
                commentElement.find('.comment').html(response.comment.replace("<br>", "\n"));

                for (var i = 0; i < response.files_infos.length; i++) {
                    var commentFileElement = $("#comment_file_template").clone();
                    commentFileElement.find('a').attr('href', response.files_infos[i].url)
                    commentFileElement.find('a').text(response.files_infos[i].name)
                    commentFileElement.appendTo(commentElement.find('.comments-footer'));
                }
                commentElement.prependTo('#comments');
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $("#comment").keyup(function () {
                $('#comment_line').val($(this).val().replace(/\n/g, '<br />'));
            });
        });

    </script>

    <script>
        var textarea = null;
        window.addEventListener("load", function () {
            textarea = window.document.querySelector("textarea");
            textarea.addEventListener("keypress", function () {
                if (textarea.scrollTop != 0) {
                    textarea.style.height = textarea.scrollHeight + "px";
                }
            }, false);
        }, false);
    </script>
@endsection