@extends('account.base')

@section('title', 'Internal Messages')

@section('account_content')

    <div class="ui grid" id="internalMessages">
        <h2 class="ui dividing header">{{ __('Internal Messages') }}</h2>

        <div class="row collapser">
            <div class="col">
                <div class="ui basic segment">
                    <div class="button" onclick="location.href='{{route("conversations")}}'">
                        {{__('Back')}}
                    </div>

                    <div class="headerContainer">
                        <h4 class="ui header sub bold">{{$universityName}}</h4>
                        <h4 class="ui header sub">{{$courseName}}</h4>
                    </div>
                </div>

                <div class="ui grid messages">
                    @foreach ($messages as $key=>$message)
                        @if($message->read_at != null)
                            <div class="row message collapsed read">
                        @else
                            <div class="row message">
                        @endif
                                <div class="logo-column">
                                    @if(substr($message->notificationType, -8, 8) == "Deadline")
                                        <span class="circle red">
                                           {{"d"}}
                                        </span>
                                    @elseif($message->user_id == Auth::id())
                                        <span class="circle yellow">
                                            {{empty(Auth::user()->userName)?"?":mb_substr(Auth::user()->userName, 0, 1)}}
                                        </span>
                                    @else
                                        <span class="circle">
                                            {{mb_substr($message->sendByName, 0, 1)}}
                                        </span>
                                    @endif
                                </div>

                                <div class="content-column relativeContainer">
                                    <div class="header relativeContainer">
                                        <h4>
                                            {{empty($message->sendByName)?Auth::user()->phone:$message->sendByName}}
                                        </h4>

                                        <h4>
                                            {{((new DateTime($message->updated_at))->add(new DateInterval('PT'.($_COOKIE['timezone'] ?? 0).'M')))->format('H:i:s / d.m.Y')}}
                                        </h4>

                                        <div class="intro">
                                            {{substr($message->body, 0, 50)}}
                                        </div>
                                    </div>

                                    <div class="content">
                                        <div class="text">
                                            {{$message->body}}
                                        </div>

                                        @if($message->isNotification == true)
                                            <div class="buttons">
                                                <div class="button" onclick="location.href='{{ route('account-consultant')}}'">{{__('Contact consultant')}}</div>

                                                @if(substr($message->notificationType, -8, 8) == "Deadline")
                                                    <div class="button" onclick="location.href='{{ route('applicationStatus')}}'">{{__('Track application status')}}</div>
                                                @elseif($message->notificationType == "applicationForm")
                                                    <div class="button" onclick="location.href='{{ route('application-form-show')}}'">{{__('Go to application form')}}</div>
                                                @else
                                                    <div class="button" onclick="location.href='{{ route('clientDocument')}}'">{{__('Go to documents upload')}}</div>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                    @endforeach
                </div>

                <div class="ui grid">
                    <div class="row">
                        <div class="logo-column">
                            <span class="circle yellow">
                                {{empty(Auth::user()->userName)?"?":substr(Auth::user()->userName, 0, 1)}}
                            </span>
                        </div>

                        <div class="content-column">
                            <textarea id="sendContent" placeholder="{{__('Click here to Reply')}}" required></textarea>

                            <div class="button" onclick="send()">
                                {{__('Send')}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        //Fold messages
        $(function(){
            $('#messagesMenuItem').addClass('active');
            $('.ui.breadcrumb').append("<a href=\"#\" class=\"section\">{{__('Internal Message')}}</a>");
            $('#internalMessages .messages .row.collapsed .content').hide();

            var totalNumber = $('#internalMessages .messages .row').length;
            var readNumber = $('#internalMessages .messages .row.read').length;
            var unreadNumber = totalNumber - readNumber;

            if(totalNumber >= 7){
                if(unreadNumber == 0){
                    readNumber -= 3;
                } else {
                    readNumber -= 2;
                }

                if(readNumber > 0){
                    if(unreadNumber == 0){
                        $('#internalMessages .messages .row.read:not(:first-child):not(:last-child):not(:nth-last-child(2))').addClass('hidden');
                    } else {
                        $('#internalMessages .messages .row.read:not(:first-child):not(:last)').addClass('hidden');
                    }

                    if(readNumber == 1){
                        var message = "{{__('message')}}";
                    } else {
                        var message = "{{__('messages')}}";
                    }

                    $('<div class="row counterContainer relativeContainer"><span class="line"></span><span class="line"></span><span class="foldedCounter">' + readNumber + ' ' + message + '</span></div>').insertAfter($('#internalMessages .messages .row.read:first-child'));
                }
            }

            if(unreadNumber == 0){
                var row = $('#internalMessages .messages .row.read:last-child')

                row.removeClass('collapsed read');
                $('.content', row).show();
            }
        });

        //Unfold messages
        $('#internalMessages').on('click', '.row.counterContainer', function(){
            $('#internalMessages .row.counterContainer').css('display', 'none');
            $('#internalMessages .row.hidden').removeClass('hidden');
        });

        //Toggle collapse
        $('#internalMessages .message').on('click', function(){
            if($(this).hasClass('collapsed')){
                $(this).removeClass('collapsed');
                $('.content', this).slideDown();
                $('.intro', this).fadeOut();
            }
        });

        $('#internalMessages .messages .row:not(:last-child) .header, #internalMessages .messages .row:not(:last-child) .circle').on('click', function(e){
            var row = $(this).parents('.row.message');

            if(!row.hasClass('collapsed')){
                e.stopImmediatePropagation();

                var selected = window.getSelection().toString();

                if(selected == ''){
                    row.addClass('collapsed');
                    $('.content', row).slideUp();
                    $('.intro', row).fadeIn();

                    if(!row.hasClass('read')){
                        row.addClass('read');
                    }
                }
            }
        });

        $('#internalMessages').on('click', function(e){
            if($(e.target).hasClass('collapser') || $(e.target).hasClass('col')){
                $('.row:not(:last-child)', this).addClass('collapsed read');
                $('.row:not(:last-child) .content', this).slideUp();
                $('.row:not(:last-child) .intro', this).fadeIn();
            }
        });

        //Reply
        function send() {
            if($('#sendContent').val()!='') {
                $.ajaxSetup({
                    headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')}
                });

                var form = new FormData();

                form.append('sendContent', $('#sendContent').val());
                form.append('applicationID', "{{$applicationID}}");

                $.ajax({
                    type: 'POST',
                    url: "{{route('sendMessagefront')}}",
                    data: form,
                    contentType: false,       // The content type used when sending data to the server.
                    cache: false,             // To unable request pages to be cached
                    processData: false,
                    success: function (data) {
                        window.location.href = "/account/messages/{{$applicationID}}/{{$universityName}}/{{$courseName}}";

                    }
                });
            }
        }
    </script>

@endsection