@extends('account.base')

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

@section('account_content')

    <div class="ui grid" id="internalMessagesSystem">
        <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>

                <div class="ui grid messages">
                    @foreach ($messages as $key=>$message)
                        @switch($message->notificationType)
                            @case('registration')
                                @include('account/messages.registration_message')
                                @break

                            @case('balance')
                                @include('account/messages.balance_message')
                                @break

                            @case('paymentSuccessful')
                            @case('paymentFailed')
                                @include('account/messages.payment_message')
                                @break

                            @case('applicationForm')
                            @case('documentUpload')
                                @include('account/messages.reminder_message')
                                @break

                            @case('consultant')
                            @case('sales')
                                @include('account/messages.assignee_message')
                                @break

                            @case('emailReset')
                            @case('phoneReset')
                                @include('account/messages.reset_message')
                                @break

                            @case('courseChange')
                            @case('courseChangeRefund')
                            @case('courseRefund')
                                @include('account/messages.course_message')
                                @break
                        @endswitch
                    @endforeach
                </div>
            </div>
        </div>
    </div>

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

                var totalNumber = $('#internalMessagesSystem .messages .row').length;
                var readNumber = $('#internalMessagesSystem .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){
                            $('#internalMessagesSystem .messages .row.read:not(:first-child):not(:last-child):not(:nth-last-child(2))').addClass('hidden');
                        } else {
                            $('#internalMessagesSystem .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($('#internalMessagesSystem .messages .row.read:first-child'));
                    }
                }

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

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

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

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

            $('#internalMessagesSystem .messages .row:not(:last-child) .header, #internalMessagesSystem .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');
                        }
                    }
                }
            });

            $('#internalMessagesSystem').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();
                }
            });

            //Display preview
            function preview(id){
                preparePreview(id, $('html'), "{{route('preparePreview')}}", "{{route('displayPreview')}}", "{{route('deletePreview')}}");
            }
        </script>

@endsection