@extends('layouts.master')

@section('title', $title)
@section('titleicon', "icon-chat2")


@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')
    <!-- BEGIN .main-content -->
    <div class="main-content">
        @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

        @if($ticket->isNormal())
            <div class="card bg-light">
                <div class="card-header">
                    {{ $ticket->user->en_name }}
                </div>
                <div class="card-body">
                    <p class="card-text" style="direction: {{mixedTextDirection($ticket->description)}};">{{ $ticket->description }}</p>
                </div>
            </div>
        @endif

        @if(count($ticket->files) > 0)
            <div class="card">
                <div class="card-body">
                    <table class="table table-striped m-0">
                        <thead>
                        <tr>
                            <td>
                                @foreach($ticket->files as $file)
                                    <i class="icon-file-empty"></i> <a href="{{ route('download_file', ['archive'=>$file->id]) }}">{{ $file->name() }}</a>
                                    @if(!$loop->last)
                                        <span class="text-separator">, </span>
                                    @endif
                                @endforeach
                            </td>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        @endif

        @if($ticket->canDiscuss())
            <div class="card">
                <div class="card-body">
                    @if($ticket->isNormal() || ($ticket->isAcademicDiscussion() && $student->advisor_id))
                    <form class="ajax_form" enctype="multipart/form-data" action="{{ route('add_ticket_comment', ['ticket'=>$ticket->id]) }}" method="POST">
                        {{ csrf_field() }}
                        <div class="form-group" >
                            <textarea id="comment" name="comment" required class="form-control" style="height: auto;" rows="3" placeholder="Write your comment..."></textarea>
                        </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">@lang('tr.Send')</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    @else
                        <div>@lang("tr.No Advisor")</div>
                    @endif
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header"> @lang('tr.Request Discussion')</div>
                    <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" href="{{ route('show_profile',['user' => $message->user->id]) }}">{{ $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 style="direction: {{mixedTextDirection($message->comment)}};">{!! 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 target="_blank" 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>

        <!-- Modal -->
        <div class="modal fade" id="close_feedback_form" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            @lang('tr.Please state why you close the ticket')
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{{route('close_ticket', ['ticket'=>$ticket->id])}}">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <textarea required="" class="form-control" name="action_comment"
                                        placeholder="@lang('tr.Your comment')"></textarea>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary" id=''>@lang('tr.Submit')</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="close_feedback_form" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            @lang('tr.Student Feedback')
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{{route('user_ticket_feedback', ['ticket'=>$ticket->id])}}">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <select name="user_satisfaction_level" id="user_satisfaction_level" class='form-control'
                                        required="">
                                    <option value=''>@lang('tr.Satisfaction Level')</option>
                                    <option value='5'>5: @lang('tr.Very satisfied')</option>
                                    <option value='4'>4</option>
                                    <option value='3'>3</option>
                                    <option value='2'>2</option>
                                    <option value='1'>1</option>
                                    <option value='0'>0: @lang('tr.Not satisfied at all')</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <textarea required="" class="form-control" name="user_feedback"
                                        placeholder="@lang('tr.Please explain more')"></textarea>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary" id=''>@lang('tr.Submit')</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>

@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